<script lang="ts" setup>
import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)

// console.log('import.meta.env.VITE_APP_BASE_API', import.meta.env.VITE_APP_BASE_API)
//
// /**获取GeoJSON数据*/
// const getGeojsonData = async () => {
//     const result = await getGeojsonApi('440000')
//     console.log('result', result)
// }
//
// getGeojsonData()
</script>

<template>
    <div class="banner-img"></div>
    <h1 class="text-sky-400 text-2xl">{{ msg }}</h1>

    <div class="card bg-indigo-600">
        <button class="p-3 m-4" type="button" @click="count++">count is {{ count }}</button>
        <p>
            Edit
            <code>components/HelloWorld.vue</code>
            to test HMR
        </p>
    </div>

    <p>
        Check out
        <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>
        , the official Vue + Vite starter
    </p>
    <p>
        Learn more about IDE Support for Vue in the
        <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank">
            Vue Docs Scaling up Guide
        </a>
        .
    </p>
    <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>

    <div class="message">测试</div>

    <div class="m-5 auto-scrollbar" style="height: 200px; padding: 20px; background-color: skyblue; overflow: auto">
        <div style="height: 300px; background-color: red"></div>
    </div>
</template>

<style lang="scss" scoped>
.banner-img {
    width: 100%;
    height: 400px;

    @include set-background-image('/banner.jpg');
}

.read-the-docs {
    color: #888888;
}

.message {
    width: 200px;
    color: $app-font-color;
}
</style>
